<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">药品管理</span>
    <el-button @click="beforeAddMedicine" type="primary" style="float:right;margin-top:13px;">录入药品</el-button>
  </div>

<!-- 新增药品弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="药品名">
            <el-input placeholder="请输入" v-model="medicineForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药品描述">
            <el-input placeholder="请输入" v-model="medicineForm.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="药品价格">
            <el-input placeholder="请输入" v-model="medicineForm.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存数量">
            <el-input placeholder="请输入" v-model="medicineForm.stock"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="药品类别">
            <el-input placeholder="请输入" v-model="medicineForm.category"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药品图片链接">
            <el-input placeholder="请输入" v-model="medicineForm.imageUrl"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="供应商">
            <el-input placeholder="请输入" v-model="medicineForm.supplier"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
<!--          <el-form-item label="创建时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="medicineForm.createTime" />
          </el-form-item>-->
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="repairVehicle">录入</el-button>
    </template>
  </el-dialog>


  <!-- 药品搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="药品名">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.name"
                  @keydown.enter="selectMedicine"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="selectMedicine">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>


<!--  药品展示列表-->
  <el-card style="margin:20px;">
    <el-table :data="medicineArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="name" label="药品名称" align="center"/>
      <el-table-column prop="description" label="药品描述" align="center"/>
      <el-table-column prop="price" label="价格" align="center" />
      <el-table-column prop="stock" label="存储数量" align="center" />
      <el-table-column prop="category" label="类别" align="center"/>
      <el-table-column prop="imageUrl" label="图片链接" align="center"/>
      <el-table-column prop="supplier" label="供应商" align="center"/>
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="updateTime" label="更新时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editVehicle(scope.row.medicineId)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteVehicle(scope.row.medicineId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from '@/util/request';
import {ElMessage} from "element-plus";
import qs from "qs";


//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);

/*==============================================================================================*/
const name = ref(getUser());

/*==============================================================================================*/
//定义变量控制dialog的标题
const dialogTitle = ref('录入药品');
/*==============================================================================================*/
//搜索卡片
const searchForm =ref({
  name:'',
})
/*==============================================================================================*/
const  beforeAddMedicine = ()=> {
  dialogVisible.value = true;
  dialogTitle.value = '新增药品';
  medicineForm.value={};
}
/*==============================================================================================*/
//定义关闭保存车辆弹窗
const handleClose=()=>{
  if (confirm("确认关闭弹窗吗？")){
    dialogVisible.value=false;//关闭弹窗
    searchForm.value={};//清空表单列表
    medicineForm.value={};
  }
}
/*==============================================================================================*/
//定义数组对象用来保存药品列表数据
const medicineArr = ref([])
/*==============================================================================================*/
//新增药品弹窗表单
const medicineForm =ref({
  name:'',
  description:'',
  price:'',
  stock:'',
  category:'',
  imageUrl:'',
  produceDate:'',
  supplier:'',
  createTime:'',
  updateTime:'',
})
/*==============================================================================================*/
//定义保存药品的方法
const repairVehicle = ()=>{
  let data = qs.stringify(medicineForm.value);
  axios.post('/medicine/list/insert',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('保存成功!');
      //保存成功后:关弹窗+清除表单数据+重新加载所有车辆数据(含刚刚新增的那条车辆数据)
      dialogVisible.value = false;
      medicineForm.value = {};
      selectMedicine();
    }else{
      //数据库里的code和license字段设置了唯一,如果重复插入会操作失败,所以可以设置更确切的提示语句
      ElMessage.error('fuck!');
    }
  })
}
/*==============================================================================================*/
//定义查询药品
const selectMedicine =()=>{
  let data = qs.stringify(searchForm.value);
  axios.get('/medicine/list/select?'+data).then((response)=>{
    if (response.data.code==2000){
      medicineArr.value=response.data.data
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}
const resetSearch =()=>{
  searchForm.value={};
  selectMedicine();
}
/*==============================================================================================*/
// 一进到页面立即执行调用加载车辆的方法
onMounted(()=>{
  selectMedicine();
})
/*==============================================================================================*/
//定义编辑车辆的方法 出弹窗+改标题+回显数据
const editVehicle = (medicineId)=>{
  dialogVisible.value = true;
  dialogTitle.value = '编辑药品';
  //根据当前药品id回显弹窗表单中此车辆的详细数据
  axios.get('/medicine/list/select?medicineId='+medicineId).then((response)=>{
    if(response.data.code==2000){
      medicineForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
/*==============================================================================================*/
const deleteVehicle=(medicineId)=>{
  console.log(medicineId)
  if (confirm('您确认要删除该药品吗？')){
    axios.post('/medicine/list/delete/'+medicineId).then((response)=>{
      if(response.data.code==2000){
        ElMessage.success('删除成功!');
        //删除成功后,需要重新加载所有的车辆数据列表!
        selectMedicine();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
}
</script>

<style scoped>

</style>